<template>
  <div id="app">
    <GoodsHeader bgColor="red" textColor="yellow" />
    <!-- 商品列表区域 -->
    <div class="main">
      <GoodsMain v-for="item in list" :key="item.id" :goodsObj="item" />
    </div>
    <GoodsFooter :goodsObj="list" @all="btn" />
  </div>
</template>

<script>
import GoodsHeader from "./components/GoodsHeader.vue";
import GoodsMain from "./components/GoodsMain.vue";
import GoodsFooter from "./components/GoodsFooter.vue";
import axios from "axios";
export default {
  components: {
    GoodsFooter,
    GoodsMain,
    GoodsHeader,
  },
  data() {
    return {
      list : []
    };
  },
  methods: {
    async getGoodsList() {
      const lists = await axios({
        method: "GET",
        url: "https://www.escook.cn/api/cart",
      });
      this.list = lists.data.list;
      console.log(this.list);
    },
    btn(i) {
      // 赋值不能使用解构
      this.list.forEach(item => item.goods_state = i)
    }
  },
  created() {
    this.getGoodsList();
  },
};
</script>

<style scoped lang="less">
.main {
  padding: 45px 0 50px;
}
</style>
